/* eslint-disable */
/**
 * Created by GYL on 2018/8/24
 */
//事件模板管理
import React, { Component } from 'react';
import MyTable from "../../../components/common/MyTable";
import PublicService from "../../../services/PublicService";
import MyModal from '../../../components/common/MyModal';
import request from '../../../utils/request';
import {  Form, Input, Button, Timeline, Icon, Tag, message, List, Typography, Descriptions } from 'antd';
import moment from 'moment';
import SubeventsInfo from './SubeventsInfo';

const IconFont = Icon.createFromIconfontCN({
  scriptUrl: '//at.alicdn.com/t/font_1315525_8t7dqol1zvn.js',
});

class Tab4_sub extends Component {

  state = {
    approvalNumber: '',
    projectName: '',
    eventName: '',
    processHistoryList: [],
    eventAuditUserList: [],
    remark: '',
    dataSate: [],
    taskClassify: '',
    content: '',
    subeventsInfo: {},
    fileList: [],
    tabData: {},
    taskClassify1data: [],//1
    taskClassify3data: []

  }

  componentDidMount() {
    this.getProcessTaskParticulars()
  }
  //查询审批详情
  getProcessTaskParticulars = () => {
    //当 ccType =3时调取子事件详情接口 /pm-web/projectmanage/progress/projectSubeventsInfo
    if (this.props.ccType === 3) {

      request({
        url: '/pm-web/process/task/getCopiedChildEvents',
        method: 'POST',
        data: { copyId: this.props.copyId }
      }).then(data => {
        if (data.rc === 0) {
          this.setState({
            tabData: data.ret.svh,
            taskClassify3data: data.ret.svh.fileList
          })
        }
      })
      return
    } else {
      request({
        url: '/pm-web/process/task/getProcessTaskParticulars',
        method: 'POST',
        data: { taskId: this.props.taskId }
      }).then(data => {
        // console.log(data)
        if (data.rc === 0) {
          this.setState({
            tabData: data.ret,
            taskClassify1data: data.ret.subeventsInfo.fileList,
            SubeventsInfoData: data.ret.subeventsInfo
          })
        }
      })
    }
  }

  tongYi = (flag) => {
    if (this.state.tabData.taskClassify == 1) {
      let params = {
        content: '',
        finishType: flag,
        taskId: this.props.taskId,
        userId: PublicService.getCookie('userId')
      }
      request({
        url: '/pm-web/process/task/taskClassifyEqualOne',
        method: 'POST',
        data: params
      }).then(data => {
        // console.log(data)
        if (data.rc === 0) {
          this.getProcessTaskParticulars()
          message.success('操作成功')
        }
      })
    }
  }

  onTextArea = (value, v) => {
    // console.log(value, v)
    this.setState({
      [value]: v.target.value
    })
  }

  onqueDing = () => {
    let params = {
      content: this.state.tabData.content,
      taskId: this.props.taskId,
      userId: PublicService.getCookie('userId')
    }
    request({
      url: '/pm-web/process/task/addComments',
      method: 'POST',
      data: params
    }).then(data => {
      // console.log()
      if (data.rc === 0) {
        message.success("评论提交成功!")
        this.getProcessTaskParticulars()
      } else {
        message.warning('评论失败!')
      }
    })
  }

  onxiangqing = (val) => {
    // console.log(val)
    let params = {
      subeventsId: val.subeventsId,
      taskId: val.taskId,

    }
    request({
      url: '/pm-web/process/task/getEventParticulars',
      method: 'POST',
      data: params
    }).then(data => {
      if (data.rc === 0) {
        this.setState({
          SubeventsInfoData: data.ret.subeventsInfo,
          SubeventsInfoVisible: true
          // fileList: data.ret.subeventsInfo.fileList
        })
      }
    })
  }

  ontongyi2 = (val, bn) => {
    // console.log(val, bn)
    if (val.taskType != 1) {
      return
    }
    let params = {
      content: '',
      finishType: bn,
      id: val.id,
      subeventsId: val.subeventsId,
      taskId: val.taskId,
      userId: PublicService.getCookie('userId')

    }
    request({
      url: '/pm-web/process/task/taskClassifyEqualTwo',
      method: 'POST',
      data: params
    }).then(data => {
      if (data.rc === 0) {
        message.success("操作成功")
        this.getProcessTaskParticulars()
      } else {
        message.warning("操作失败")
      }
    })
  }
  onsubeventsInfo = () => {
    this.setState({
      SubeventsInfoVisible: true
    })

  }

  // 取消保存
  ModalCancel = (type) => {
    let t = this;
    t.setState({
      [type]: false,
      modalBtnLoading: false
    })
  };
  render() {
    let t = this
    return (
      <div style={{ position: 'relative', boxSize: 'border-box', padding: 5, paddingTop: 0, paddingBottom: 20, height: '100%' }}>
        {/* 事件详情 */}
        {
          this.state.SubeventsInfoVisible && <SubeventsInfo
            onCancel={this.ModalCancel.bind(this, 'SubeventsInfoVisible')}
            SubeventsInfoData={this.state.SubeventsInfoData}
            visible={this.state.SubeventsInfoVisible}
          />
        }
        <div style={{ flex: 1, maxHeight: '85vh', overflow: 'auto' }}>

          {
            this.props.ccType == 1 ? <Descriptions bordered>
              <Descriptions.Item label="审批编号" span={24}>{this.props.ccType == 3 ? "" : this.state.tabData.approvalNumber || '无'}</Descriptions.Item>
              <Descriptions.Item label="项目名称" span={24}>{this.state.tabData.projectName || '无'}</Descriptions.Item>
              <Descriptions.Item label="事件名称" span={24}>{this.props.ccType == 3 ? "" : this.state.tabData.eventName || '无'}</Descriptions.Item>
              <Descriptions.Item label="事件详情" span={24}>
                <Button onClick={this.onsubeventsInfo}> <IconFont type="icon-gantetu" style={{ fontSize: 20 }} /> 打开事件详情</Button>
              </Descriptions.Item>
              <Descriptions.Item label="历史操作" span={24}>
                {
                  this.state.tabData.taskClassify == 1 ?
                    <Timeline style={{ margin: 5 }}>
                      {
                        this.state.tabData.processHistoryList.map((item, index) => {
                          return (
                            <Timeline.Item dot={<Icon type="clock-circle-o" style={{ fontSize: '16px' }} />} color="red" key={index}>
                              {item.assigneeName}   {item.operationTime}    {item.taskType}
                              <p>{item.content}</p>
                            </Timeline.Item>
                          )
                        })
                      }

                    </Timeline> : '无'
                }


              </Descriptions.Item>

              <Descriptions.Item label="审批人" span={this.state.tabData.taskClassify == 1 ? 24 : 0}>
                {
                  this.state.tabData.taskClassify == 1 ?
                    <div>{
                      this.state.tabData.eventAuditUserList.map((item, index) => {

                        return (
                          <Tag key={index} style={{ margin: 2 }} color={item.approvalStatus == 1 ? "#108ee9" : item.approvalStatus == 2 ? "#2db7f5" : item.approvalStatus == 3 ? "#87d068" : '#f50'}>{item.userName} {item.approvalStatus == 1 ? "未审批" : item.approvalStatus == 2 ? "审批中" : item.approvalStatus == 3 ? "已同意" : '已拒绝'}</Tag>
                        )

                      })
                    }</div> : '无'
                }


              </Descriptions.Item>

            </Descriptions> : ''
          }

          {
            this.props.ccType == 2 ? <Descriptions bordered>
              <Descriptions.Item label="审批编号" span={24}>{this.props.ccType == 3 ? "" : this.state.tabData.approvalNumber || '无'}</Descriptions.Item>
              <Descriptions.Item label="项目名称" span={24}>{this.state.tabData.projectName || '无'}</Descriptions.Item>
              <Descriptions.Item label="事件名称" span={24}>{this.props.ccType == 3 ? "" : this.state.tabData.eventName || '无'}</Descriptions.Item>




              <Descriptions.Item label="子事件列表" span={24}>
                {
                  this.state.tabData.taskClassify == 2 ? <List
                    size='small'
                    dataSource={this.state.tabData.taskSubeventList}
                    renderItem={item => (
                      <List.Item>
                      <Typography.Text mark>{item.subeventsName}</Typography.Text> {item.content}
                      <div style={{ flex: 1, textAlign: 'right', cursor: 'pointer' }}>

                        <span onClick={this.onxiangqing.bind(this, item)}><IconFont type="icon-pinglun" style={{ width: 20 }} />详情 </span>

                        <span onClick={this.ontongyi2.bind(this, item, true)}>{item.taskType == 1 ? '' : item.taskType == 2 ? '已同意' : ''}<IconFont type="icon-icon-test" style={{ width: 20, display: item.taskType == 1 ? '' : 'none' }} /><span style={{ width: 20, display: item.taskType == 1 ? '' : 'none' }} >同意</span> </span>
                        <span onClick={this.ontongyi2.bind(this, item, false)}>{item.taskType == 1 ? '' : item.taskType == 2 ? '' : '已拒绝'}<IconFont type="icon-butongyi-" style={{ width: 20, display: item.taskType == 1 ? '' : 'none' }} /><span style={{ width: 20, display: item.taskType == 1 ? '' : 'none' }} >拒绝</span> </span>
                      </div>
                    </List.Item>
                    )}
                  /> : '无'
                }
              </Descriptions.Item>
            </Descriptions> : ''
          }

     

        </div>
      </div>
    );


  }
}
export default Form.create()(Tab4_sub);


